import { createSlice } from "@reduxjs/toolkit"
import axios from "axios"

// 创建store的写法保持不变，配置好同步修改状态的方法
const channelStore = createSlice({
  name: 'channel',
  // 初始化state数据，数组
  initialState: {
    channelList: []
  },
  reducers: {
    // 设置状态数据的方法
    setChannels (state, action) {
      state.channelList = action.payload
    }
  }
})


// 异步请求部分
const { setChannels } = channelStore.actions
// 2. 单独封装一个函数，在函数内部return一个新函数，在新函数中
//  2.1 封装异步请求获取数据
//  2.2 调用同步actionCreater传入异步数据生成一个action对象，并使用dispatch提交
const fetchChannlList = () => {
  return async (dispatch) => {
    const res = await axios.get('http://geek.itheima.net/v1_0/channels')
    dispatch(setChannels(res.data.data.channels))
  }
}

export { fetchChannlList }

const reducer = channelStore.reducer

export default reducer
